<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Todolist</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div>
			<input v-model="inputValue"/>
			<button @click="handleSubmit">提交</button>
		</div>
		<ul>
			<!-- <li v-for="(item,index) of list" :key="index">
			{{item}}
		    </li> -->
		    <todo-item 
		    v-for="(item,index) of list" 
		    :key="index" 
		    :content="item"
		    :index="index"
		    @delete="handleDelete"
		    >
		    </todo-item>
		</ul>
	</div>

	<script>
		Vue.component('todo-item',{
			props: ['content','index'],
			template:'<li @click="handleClick">{{content}}</li>',
			methods:{
		    	handleClick:function(){
		    		this.$emit('delete',this.index)
		    	}
		    }	
		})

        // var TodoItem = {
        // 	template:'<li>item</li>'
        // }

		new Vue({
			// components:{
			// 	'todo-item':TodoItem
			// },
			el:"#root",
			data:{
				inputVaule:"",
				list:[]
			},
			methods:{
				handleSubmit:function(){
					this.list.push(this.inputValue)
					this.inputValue = ""
				},
				handleDelete:function(index){
                    this.list.splice(index,1) 
				}
			}
		})
	</script>
</body>
</html>